@use '@angular/material' as mat;
@import '../../theme/variable/breakpoint';
@import '../../theme/mixins/amixin';

@mixin widgets-color($theme) {
  $config: mat.m2-get-color-config($theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  $bg-color: mat.m2-get-color-from-palette($background, background);
  $divider-color: mat.m2-get-color-from-palette($foreground, divider);

  .wave-wrapper {
    background: linear-gradient(
      -74deg,
      mat.m2-get-color-from-palette($primary, 50) 0%,
      mat.m2-get-color-from-palette($primary, 100) 100%
    );

    .wave {
      color: $bg-color;
    }
  }

  .breadcrumb {
    ul {
      li {
        color: mat.m2-get-color-from-palette($foreground, text, 0.75);

        a {
          color: mat.m2-get-color-from-palette($foreground, text, 0.75);

          &:hover {
            color: mat.m2-get-color-from-palette($primary);
          }
        }
      }
    }
  }

  .testimonial {
    &.style-v2 {
      .bx-wrapper {
        img {
          border-color: $divider-color !important;
        }
      }

      .testimonial-detail {
        .info {
          color: mat.m2-get-color-from-palette($foreground, secondary-text);
        }

        .sub-title {
          color: mat.m2-get-color-from-palette($primary);
        }

        .desc {
          color: mat.m2-get-color-from-palette($foreground, secondary-text);
        }
      }
    }
  }

  .feature-cover {
    &:before {
      background: $bg-color;
    }

    &:after {
      background: $bg-color;
    }

    .feature-inner {
      &:before {
        background: $bg-color;
      }

      &:after {
        background: $bg-color;
      }
    }

    .btns {
      > a {
        background: $bg-color;
        color: mat.m2-get-color-from-palette($primary);

        &.icon-link {
          background: rgba(0, 0, 0, 0.8);
          color: mat.m2-get-color-from-palette($primary, default-contrast);
        }
      }
    }

    .feature-inner-ling {
      .media {
        background-color: mat.m2-get-color-from-palette($background, background);
      }

      .title {
        color: mat.m2-get-color-from-palette($primary, default-contrast);
      }

      &:before {
        box-shadow: 0px -5px 3px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0px -5px 3px rgba(0, 0, 0, 0.1) inset;
        -webkit-box-shadow: 0px -5px 3px rgba(0, 0, 0, 0.1) inset;
      }

      &:after {
        background: mat.m2-get-color-from-palette($primary);
      }
    }
  }

  .feature-float {
    .title {
      background-color: mat.m2-get-color-from-palette($foreground, elevation, 0.7);
      color: mat.m2-get-color-from-palette($primary, default-contrast, 0.8);
    }

    .btns {
      .btn {
        transition: all 0.3s;
      }

      .btn-full {
        color: mat.m2-get-color-from-palette($primary);
        border: 1px solid mat.m2-get-color-from-palette($primary, 0.4);
        background-color: mat.m2-get-color-from-palette($primary, 0.2);
        @include mat.elevation(3, mat.m2-get-color-from-palette($primary), 0.5);

        &:hover {
          background-color: mat.m2-get-color-from-palette($primary);
          color: mat.m2-get-color-from-palette($primary, default-contrast);
        }
      }

      .btn-open {
        color: mat.m2-get-color-from-palette($warn);
        border: 1px solid mat.m2-get-color-from-palette($warn, 0.4);
        background-color: mat.m2-get-color-from-palette($warn, 0.2);
        @include mat.elevation(3, mat.m2-get-color-from-palette($warn), 0.5);

        &:hover {
          background-color: mat.m2-get-color-from-palette($warn);
          color: mat.m2-get-color-from-palette($primary, default-contrast);
        }
      }
    }

    .media {
      img {
        background-color: mat.m2-get-color-from-palette($background, 'app-bar');
      }
    }
  }

  .overlay {
    &:before {
      background-color: rgba(60, 72, 88, 0.7);
    }
  }

  .pagination {
    button.current {
      background-color: mat.m2-get-color-from-palette($primary) !important;
      color: mat.m2-get-color-from-palette($primary, default-contrast) !important;
      border-radius: 4px;
    }
  }

  .list-done {
    li {
      &:before {
        color: mat.m2-get-color-from-palette($primary);
        background-color: mat.m2-get-color-from-palette($primary, text, 0.6);
      }
    }
  }

  .list-clear {
    li {
      &:before {
        color: mat.m2-get-color-from-palette($warn, text);
        background-color: mat.m2-get-color-from-palette($warn, 0.25);
      }
    }
  }

  .search-action {
    @media #{$gt-sm} {
      form {
        background-color: mat.m2-get-color-from-palette($background, card);
        @include mat.elevation(4, mat.m2-get-color-from-palette($foreground, text), 0.2);
        border: 1px solid mat.m2-get-color-from-palette($foreground, divider, 0.1);

        &:hover,
        &:focus {
          @include mat.elevation(4, mat.m2-get-color-from-palette($primary), 0.5);
          border: 1px solid mat.m2-get-color-from-palette($primary, 0.1);
        }
      }
    }
  }

  .media-meta {
    border-bottom: 1px solid $divider-color;

    .top,
    .middle {
      color: mat.m2-get-color-from-palette($foreground, text, 0.3);
    }
  }

  quill-editor {
    background-color: mat.m2-get-color-from-palette($background, background);

    .ql-toolbar,
    .ql-container {
      border-color: mat.m2-get-color-from-palette($foreground, divider);
    }

    .ql-container {
      background-color: mat.m2-get-color-from-palette($background, card);
    }
  }

  .view-list {
    .sidebar {
      > .inner {
        background-color: mat.m2-get-color-from-palette($background, card);
        @include mat.elevation(4, mat.m2-get-color-from-palette($foreground, divider), 0.5);
      }
    }

    .view {
      @include mat.elevation(6, mat.m2-get-color-from-palette($foreground, divider), 0.25);
    }
  }

  .dynamic-table {
    background-color: mat.m2-get-color-from-palette($background, card);

    .mat-mdc-header-cell {
      color: mat.m2-get-color-from-palette($foreground, text);
    }

    tbody {
      > tr {
        &:hover {
          background-color: mat.m2-get-color-from-palette($background, background);
        }
      }

      td {
        .marker {
          color: mat.m2-get-color-from-palette($warn);
        }
      }
    }
  }

  .border-primary {
    border: 1px solid mat.m2-get-color-from-palette($primary) !important;
  }

  .border-warn {
    border: 1px solid mat.m2-get-color-from-palette($warn) !important;
  }

  .border-accent {
    border: 1px solid mat.m2-get-color-from-palette($accent) !important;
  }

  .inline-lightbox {
    .inline {
      color: mat.m2-get-color-from-palette($primary);
    }
  }

  .panel {
    .mat-expanded .mat-expansion-panel-header-title {
      .badge {
        color: mat.m2-get-color-from-palette($primary, default-contrast);
        background-color: mat.m2-get-color-from-palette($primary, 400, 0.85);
      }
    }
  }

  .chart {
    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
    @include mat.elevation(2, mat.m2-get-color-from-palette($foreground, divider), 0.07);
  }

  .tab {
    &.pills {
      .mat-mdc-tab {
        background-color: mat.m2-get-color-from-palette($primary, 0.06);
      }
      .mdc-tab--active {
        background-color: mat.m2-get-color-from-palette($primary);
        opacity: 1;
        .mdc-tab__text-label {
          color: mat.m2-get-color-from-palette($primary, default-contrast);
        }
      }
    }
  }

  .github-star {
    background-color: mat.m2-get-color-from-palette($background, card);
    border: 1px solid mat.m2-get-color-from-palette($foreground, divider);

    a {
      color: mat.m2-get-color-from-palette($foreground, text, 0.75);
    }

    .right {
      border-left: 1px solid mat.m2-get-color-from-palette($foreground, divider);
    }
  }

  .mat-mdc-outlined-button:not(.mat-button-disabled) {
    border-color: mat.m2-get-color-from-palette($primary);
  }

  .jsoneditor {
    border-color: mat.m2-get-color-from-palette($primary);

    .jsoneditor-menu {
      background-color: mat.m2-get-color-from-palette($primary);
      border-bottom-color: mat.m2-get-color-from-palette($primary);
    }
  }

  .code-editor {
    .box {
      border: 1px solid mat.m2-get-color-from-palette($foreground, divider);
      @include mat.elevation(2, mat.m2-get-color-from-palette($foreground, divider), 0.07);

      .jsoneditor {
        border-color: transparent;
      }
    }
  }

  .upload-media {
    .ngx-file-drop__drop-zone {
      border: 2px dotted mat.m2-get-color-from-palette($primary, 0.75);

      .ngx-file-drop__content {
        color: mat.m2-get-color-from-palette($foreground, text, 0.5);
      }
    }
  }

  .dynamic-table {
    a {
      color: mat.m2-get-color-from-palette($foreground, text);
      &:hover,
      &:focus {
        color: mat.m2-get-color-from-palette($primary);
      }
    }
  }
}
